<template>
  <div>
    <DynamicallyTableColumnVue
      :table-data="tableData"
      :colum-config="columConfig"
      @checkbox-click="handleCheckboxClick"
      @refresh="handleRefresh"
    />
  </div>
</template>

<script>
import DynamicallyTableColumnVue from "@/base-ui/dynamically-table-column/dynamically-table-column.vue";
export default {
  components: { DynamicallyTableColumnVue },
  data() {
    return {
      columConfig: [
        {
          prop: "uname",
          checked: true, // 是否被选中
          othersConfig: {
            fixed: "fixed",
            width: "100px",
          },
        },
        {
          prop: "age",
          checked: true,
          othersConfig: {},
        },
        {
          prop: "address",
          checked: true,
          othersConfig: {},
        },
      ],
      tableData: [
        {
          uname: "lisi",
          age: "12",
          address: "福建",
        },
        {
          uname: "lisi",
          age: "12",
          address: "福建",
        },
        {
          uname: "lisi",
          age: "12",
          address: "福建",
        },
        {
          uname: "lisi",
          age: "12",
          address: "福建",
        },
        {
          uname: "lisi",
          age: "12",
          address: "福建",
        },
      ],
    };
  },
  methods: {
    handleCheckboxClick(row) {
      let currentItem = row[2];
      let temp = this.columConfig.find(
        (item) => item.prop === currentItem.prop
      );
      if (temp) {
        temp.checked = currentItem.checked;
      }
    },
    handleRefresh() {
      this.columConfig.forEach((item) => {
        item.checked = true;
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
